<template>
  <div>
    <a-spin :spinning="spinning" tip="正在提交. . .">
      <div class="main">
        <div class="left_select">
          <div class="select_main">
            <div class="select_wrap">
              <div class="select_item" v-for="(item, index) in data" :key="item.key"
                :class="{error:!item.isStatus&&IsSubmit,active: item.isActive}" @click="selectChange(index)">
                {{ item.key }}
              </div>
            </div>
          </div>
        </div>
        <div class="right_answer">
          <div class="answer_wrap">
            <div class="header_topic">
              <span>题目 {{ ActiveData.key }}:</span>
              {{ ActiveData.topic }}
            </div>
            <div class="answer_content">
              <a-textarea v-model="ActiveData.answer" :auto-size="{ minRows: 3, maxRows: 7 }"
                @change="textareaChange" />
            </div>
          </div>
        </div>
      </div>
      <div class="btn_wrap">
        <a-button v-if="NextIndex<this.data.length" @click="selectChange(NextIndex)">下一题
          <a-icon type="right" />
        </a-button>
        <a-button v-else size="large" @click="submitTest">提交
          <a-icon type="check" />
        </a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
  const data = [
    { key: "1", topic: "吃了没1", isStatus: false, isActive: true, answer: "" },
    { key: "2", topic: "吃了没2", isStatus: false, isActive: false, answer: "" },
    { key: "3", topic: "吃了没3", isStatus: false, isActive: false, answer: "" },
    { key: "4", topic: "吃了没4", isStatus: false, isActive: false, answer: "" },
    { key: "5", topic: "吃了没4", isStatus: false, isActive: false, answer: "" },
    { key: "6", topic: "吃了没4", isStatus: false, isActive: false, answer: "" },
    { key: "7", topic: "吃了没4", isStatus: false, isActive: false, answer: "" },
    { key: "8", topic: "吃了没4", isStatus: false, isActive: false, answer: "" },
  ];
  export default {
    props: {
      removeTableItem: {
        type: Function,
        default: null,
      },
    },
    data() {
      return {
        data,
        IsSubmit: false,//是否提交过
        spinning: false
      };
    },
    computed: {
      ActiveData() {
        return this.data.filter(item => item.isActive)[0];
      },
      NextIndex() {
        return this.data.findIndex(item => item.isActive) + 1;
      }
    },
    methods: {
      //切换选中的题目选项卡
      selectChange(index) {
        this.data.forEach(item => item.isActive = false);
        this.data[index].isActive = true;
      },
      //输入框内容变化
      textareaChange() {
        if (this.ActiveData.answer.trim().length > 0) {
          this.ActiveData.isStatus = true;
        } else {
          this.ActiveData.isStatus = false;
        }
      },
      // //提交测试
      submitTest() {
        var tempdata = this.data.filter(item => !item.isStatus);
        if (tempdata.length != 0) {
          //有未完成的题目
          this.IsSubmit = true;
          this.$message.warning('未完成所有题目');
          return;
        }
        //提交答案        
        // this.removeTableItem();//调用父组件的方法关闭选项卡
        this.spinning = true;//实现提交中的loading信息  
      }
    },
  };
</script>

<style lang="less" scoped>
  .main {
    display: flex;
    padding: 1%;

    .left_select {
      flex: 1;

      .select_main {
        width: 80%;
        margin: 0 auto;
        border: 1.5px solid #ccc;
        min-height: 200px;

        .select_wrap {
          padding: 1%;
          display: flex;
          flex-wrap: wrap;

          .select_item {
            width: 12%;
            margin: 1%;
            text-align: center;
            border: 1.5px solid #ccc;
          }
        }
      }
    }

    .right_answer {
      flex: 4;

      .answer_wrap {
        height: 100%;
        padding: 0 1% 1% 1%;

        .header_topic {
          margin-bottom: 1%;

          span {
            font-size: 15px;
            font-weight: 600;
          }
        }

        .answer_content {
          height: 90%;
          width: 50%;

          .ant-input {
            min-height: 90% !important;
          }
        }
      }
    }
  }

  .error {
    background-color: red;
    color: white;
  }

  .active {
    background-color: #7b9e31;
    color: white;
  }


  .btn_wrap {
    width: 60%;
    display: flex;
    justify-content: flex-end;

    .ant-btn {
      background-color: #7b9e31;
      color: white;
    }
  }
</style>